# 一、Next.js是什么

Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法，可以很好的实现代码的模块化，有利于代码的开发和维护

# 1.1 Next.js带来了很多好的特性

• 默认服务端渲染模式，以文件系统为基础的客户端路由
• 代码自动分隔使页面加载更快
• 以页面为基础的简洁的客户端路由
• 以webpack的热替换为基础的开发环境
• 使用React的JSX和ES6的module，模块化和维护更方便
• 可以运行在Express和其他Node.js的HTTP 服务器上
• 可以定制化专属的babel和webpack配置

# 二、构建一个基本的Next项目

# 2.1 创建项目

// 在本地创建一个项目跟目录
$ mkdir hello-next 

// 切换到项目根目录
$ cd hello-next

// 用npm初始化项目
$ npm init -y

// 将react和next安装到本地依赖
$ npm install --save react react-dom next

// 创建文件夹 pages
$ mkdir pages

创建完文件夹之后，打开hello-next文件下的package.json文件，在 scripts 下添加一个script，如下

{
  "scripts": {
    "dev": "next"
  }
}

$ npm run dev

# 2.2 创建页面

Next.js是从服务器生成页面，再返回给前端展示。Next.js默认从 pages 目录下取页面进行渲染返回给前端展示，并默认取 pages/index.js 作为系统的首页进行展示。注意，pages 是默认存放页面的目录，路由的根路径也是pages目录

• 在 pages/index.js 中创建一个React函数式组件

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
)

export default Index